// ==============================================
// 智能体问答系统 - 全局样式
// ==============================================

@import './variables.scss';

// 全局重置
// ----------------------------------------------
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: $font-family-primary;
  font-size: $font-size-base;
  font-weight: 400;
  line-height: 1.5;
  color: var(--el-text-color-primary);
  background-color: var(--el-bg-color-page);
  overflow-x: hidden;
  transition: $transition-color, background-color $transition-duration;
}

// 应用容器
#app {
  height: 100vh;
  overflow: hidden;
}

// 链接样式
a {
  color: var(--el-color-primary);
  text-decoration: none;
  transition: $transition-color;

  &:hover {
    color: var(--el-color-primary-light-3);
  }

  &:focus {
    outline: 2px solid var(--el-color-primary);
    outline-offset: 2px;
  }
}

// 按钮基础样式增强
.el-button {
  font-weight: $font-weight-primary;
  border-radius: $border-radius-base;
  transition: $transition-all;

  &:focus {
    outline: 2px solid var(--el-color-primary-light-8);
    outline-offset: 2px;
  }

  // PC端按钮悬浮效果
  @media (hover: hover) {
    &:hover {
      transform: translateY(-1px);
      box-shadow: $box-shadow-light;
    }
  }
}

// 输入框样式增强
.el-input {
  .el-input__wrapper {
    border-radius: $border-radius-base;
    transition: $transition-border, $transition-box-shadow;

    &:focus {
      box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
    }
  }

  &.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
  }
}

// 卡片样式增强
.el-card {
  border-radius: $border-radius-base;
  transition: $transition-box-shadow;

  @media (hover: hover) {
    &:hover {
      box-shadow: $box-shadow-light;
    }
  }
}

// 滚动条样式
.custom-scrollbar {
  @include scrollbar-style;
}

// 默认为所有滚动容器应用自定义滚动条
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
  
  &:hover {
    background-color: rgba(144, 147, 153, 0.5);
  }
}

// 暗色主题下的滚动条
html.dark {
  ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}

// 响应式布局基础
// ----------------------------------------------

// 容器最大宽度
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 $spacing-lg;

  @include respond-to(sm) {
    max-width: 750px;
  }

  @include respond-to(md) {
    max-width: 970px;
  }

  @include respond-to(lg) {
    max-width: 1170px;
  }

  @include respond-to(xl) {
    max-width: 1400px;
  }

  @include respond-to(xxl) {
    max-width: 1600px;
  }
}

// 网格系统
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -#{$spacing-sm};
}

.col {
  flex: 1;
  padding: 0 $spacing-sm;

  // 响应式列
  @for $i from 1 through 12 {
    &.col-#{$i} {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }

    @include respond-to(sm) {
      &.col-sm-#{$i} {
        flex: 0 0 percentage($i / 12);
        max-width: percentage($i / 12);
      }
    }

    @include respond-to(md) {
      &.col-md-#{$i} {
        flex: 0 0 percentage($i / 12);
        max-width: percentage($i / 12);
      }
    }

    @include respond-to(lg) {
      &.col-lg-#{$i} {
        flex: 0 0 percentage($i / 12);
        max-width: percentage($i / 12);
      }
    }

    @include respond-to(xl) {
      &.col-xl-#{$i} {
        flex: 0 0 percentage($i / 12);
        max-width: percentage($i / 12);
      }
    }
  }
}

// 工具类
// ----------------------------------------------

// 间距工具类
@each $size, $value in (
  xs: $spacing-xs,
  sm: $spacing-sm,
  md: $spacing-md,
  lg: $spacing-lg,
  xl: $spacing-xl,
  xxl: $spacing-xxl,
  xxxl: $spacing-xxxl
) {
  .m-#{$size} { margin: $value !important; }
  .mt-#{$size} { margin-top: $value !important; }
  .mr-#{$size} { margin-right: $value !important; }
  .mb-#{$size} { margin-bottom: $value !important; }
  .ml-#{$size} { margin-left: $value !important; }
  .mx-#{$size} { margin-left: $value !important; margin-right: $value !important; }
  .my-#{$size} { margin-top: $value !important; margin-bottom: $value !important; }

  .p-#{$size} { padding: $value !important; }
  .pt-#{$size} { padding-top: $value !important; }
  .pr-#{$size} { padding-right: $value !important; }
  .pb-#{$size} { padding-bottom: $value !important; }
  .pl-#{$size} { padding-left: $value !important; }
  .px-#{$size} { padding-left: $value !important; padding-right: $value !important; }
  .py-#{$size} { padding-top: $value !important; padding-bottom: $value !important; }
}

// 文本工具类
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.text-primary { color: var(--el-color-primary) !important; }
.text-success { color: var(--el-color-success) !important; }
.text-warning { color: var(--el-color-warning) !important; }
.text-danger { color: var(--el-color-danger) !important; }
.text-info { color: var(--el-color-info) !important; }
.text-muted { color: var(--el-text-color-placeholder) !important; }

.text-ellipsis {
  @include text-ellipsis;
}

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

// 显示工具类
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

// Flex 工具类
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }

// 位置工具类
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

// 边框工具类
.border { border: 1px solid var(--el-border-color) !important; }
.border-top { border-top: 1px solid var(--el-border-color) !important; }
.border-right { border-right: 1px solid var(--el-border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--el-border-color) !important; }
.border-left { border-left: 1px solid var(--el-border-color) !important; }

.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }

.rounded { border-radius: $border-radius-base !important; }
.rounded-sm { border-radius: $border-radius-small !important; }
.rounded-lg { border-radius: $border-radius-round !important; }
.rounded-circle { border-radius: $border-radius-circle !important; }

// 阴影工具类
.shadow { box-shadow: $box-shadow-base !important; }
.shadow-light { box-shadow: $box-shadow-light !important; }
.shadow-none { box-shadow: none !important; }

// 智能体应用特定样式
// ----------------------------------------------

// 消息流式显示动画
.streaming-text {
  &::after {
    content: '●';
    animation: streamingDots 1.5s linear infinite;
    margin-left: 2px;
  }
}

// 任务卡片状态指示
.task-status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;

  &.pending {
    background-color: $task-pending;
    animation: pulse 2s infinite;
  }

  &.running {
    background-color: $task-running;
    animation: pulse 1s infinite;
  }

  &.completed {
    background-color: $task-completed;
  }

  &.failed {
    background-color: $task-failed;
  }

  &.cancelled {
    background-color: $task-cancelled;
  }
}

// MCP服务健康状态
.mcp-health-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;

  .health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;

    &.healthy {
      background-color: $mcp-healthy;
    }

    &.unhealthy {
      background-color: $mcp-unhealthy;
      animation: pulse 2s infinite;
    }
  }
}

// 加载动画
.loading-dots {
  display: inline-block;
  
  &::after {
    content: '...';
    animation: typing 2s infinite;
  }
}

// 右键菜单样式
.context-menu {
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color);
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-light;
  z-index: $z-index-popper;

  .context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: $transition-all;

    &:hover {
      background-color: var(--el-color-primary-light-9);
    }

    &:first-child {
      border-top-left-radius: $border-radius-base;
      border-top-right-radius: $border-radius-base;
    }

    &:last-child {
      border-bottom-left-radius: $border-radius-base;
      border-bottom-right-radius: $border-radius-base;
    }
  }

  .context-menu-separator {
    height: 1px;
    background: var(--el-border-color-lighter);
    margin: 6px 12px;
  }
}

// 响应式隐藏/显示
// ----------------------------------------------

@include respond-to(sm) {
  .hidden-xs { display: none !important; }
  .visible-sm { display: block !important; }
}

@include respond-to(md) {
  .hidden-sm { display: none !important; }
  .visible-md { display: block !important; }
}

@include respond-to(lg) {
  .hidden-md { display: none !important; }
  .visible-lg { display: block !important; }
}

@include respond-to(xl) {
  .hidden-lg { display: none !important; }
  .visible-xl { display: block !important; }
}

@include respond-to(xxl) {
  .hidden-xl { display: none !important; }
  .visible-xxl { display: block !important; }
}

// PC端专用样式
// ----------------------------------------------

@media (hover: hover) and (pointer: fine) {
  // 只在PC端应用的悬浮效果
  .pc-hover-scale {
    transition: transform 0.2s ease;
    
    &:hover {
      transform: scale(1.02);
    }
  }

  .pc-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: $box-shadow-light;
    }
  }

  .pc-hover-border {
    transition: border-color 0.2s ease;
    
    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}

// 禁用选择样式（适用于UI控件）
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// 暗色主题特定样式
// ----------------------------------------------

html.dark {
  // 暗色主题下的特殊样式调整
  .el-card {
    background-color: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
  }

  .context-menu {
    background-color: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  // 暗色主题下的消息背景
  .message-user {
    background-color: rgba(64, 158, 255, 0.1);
  }

  .message-assistant {
    background-color: var(--el-bg-color-overlay);
  }

  .message-system {
    background-color: rgba(230, 162, 60, 0.1);
  }

  .message-error {
    background-color: rgba(245, 108, 108, 0.1);
  }
}

// 打印样式
// ----------------------------------------------

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .el-button,
  .el-input {
    print-color-adjust: exact;
  }
}